<a class="close-modal" (click)="closeModal()"><i class="moon-Close"></i></a>
<h4>Save new Segment</h4>

<form [formGroup]="form" class="form center-vertical text-left">

  <ng-select #ngSelectComponent
             type="text"
             placeholder="Enter new segment name"
             formControlName="segmentName"
             bindLabel="name"
             bindValue="name"
             [closeOnSelect]="true"
             (keyup)="setTemporaryName($event)"
             (keydown.enter)="setByEnter()"
             [items]="segments"
             [(ngModel)]="selectedSegment" dropdownPosition="down">
    <ng-template ng-footer-tmp>
      <div class="create-new" *ngIf="!checkNewSegment()"><i class="fal fa-plus-circle"></i>&nbsp;Add new segment</div>
      <div class="create-new add" (click)="addNewSegment()" *ngIf="checkNewSegment()"><i class="fal fa-plus-circle"></i>&nbsp;Add "<strong>{{temporaryName}}</strong>"</div>
    </ng-template>
  </ng-select>

  <small>This segment will show in your sidebar.</small>
  <br>
  <br>
  <button (click)="saveSegment()" [disabled]="!formValid()" class="{{formValid() ? '': 'mat-button-disabled'}}">Save Segment</button>
  <a (click)="closeModal()">Cancel</a>

</form>
